<style scoped>

.spanClass {
  margin-left: 20px;
}
</style>
<template>
  <el-dialog
    title="Mock结果"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="clearForm">
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="saveData"
    >
      <el-form-item label="MockName">
        <span class="spanClass">{{ saveData.mockName }}</span>
      </el-form-item>
      <el-form-item label="MockUuid">
        <span class="spanClass">{{ saveData.mockUuid }}</span>
      </el-form-item>
      <el-form-item label="是否成功">
        <span class="spanClass">{{ saveData.success }}</span>
      </el-form-item>
      <el-form-item label="执行耗时(ms)">
        <span class="spanClass">{{ saveData.runtime }}</span>
      </el-form-item>
      <el-form-item label="Mock请求">
        <!-- https://www.npmjs.com/package/vue-json-views -->
        <json-view icon-style="circle" :closed="true"
                   v-if="isJSON(saveData.mockRequest)" :data="getJsonData(saveData.mockRequest)"/>
        <span v-if="!isJSON(saveData.mockRequest)">{{ saveData.mockRequest }}</span>
      </el-form-item>
      <el-form-item v-if="saveData.mockResponse" label="Mock结果">
        <json-view icon-style="circle" :closed="true" v-if="isJSON(saveData.mockResponse)" :data="getJsonData(saveData.mockResponse)"/>
        <span v-if="!isJSON(saveData.mockResponse)">{{ saveData.mockResponse }}</span>
      </el-form-item>
      <el-form-item v-if="saveData.mockErrorMessage" label="Mock异常">
        <span class="spanClass">{{ saveData.mockErrorMessage }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="clearForm">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import jsonView from 'vue-json-views'

export default {
  name: "mockCallReportView",
  filters: {},
  components: {
    jsonView
  },
  data() {
    return {
      labelPosition: 'right',
      dialogVisible: false,
      saveData: {
        mockRequest: '',
        mockResponse: '',
        mockErrorMessage: '',
      },
    }
  },
  methods: {
    async load(data) {
      let vm = this
      vm.saveData = vm.$cloneObj(data)
      vm.dialogVisible = true
    },
    clearForm() {
      let vm = this
      vm.saveData = {
        mockRequest: '',
        mockResponse: '',
        mockErrorMessage: '',
      }
      vm.dialogVisible = false
    },
    getStringDate(data) {
      return data + ''
    },
    getJsonData(obj) {
      return JSON.parse(obj)
    },
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          let obj = JSON.parse(str);
          return !!(typeof obj == 'object' && obj);
        } catch (e) {
          return false;
        }
      }
      return undefined
    }
  },
  watch: {}
}
</script>
